<template>
  <div class="container">
    <!-- <Modal v-model="isshow" /> -->
    <!-- <button @click="isshow = !isshow">翻转</button> -->
    <!-- 文章分类栏 -->
    <van-tabs swipeable animated v-model="activedIndex">
      <van-tab :key="item.id" v-for="item in channelsList" :title="item.name">
        <!-- 可滚动内容区域 -->
        <ArticleList :channelId="item.id" />
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 -->
    <span @click="show = true" class="bar_btn">
      <van-icon name="wap-nav"></van-icon>
    </span>
    <ChannelEdit
      v-model="show"
      :mychannel="channelsList"
      :activedIndex.sync="activedIndex"
    />
    <!-- @agEc-index="activedIndex = $event" -->
  </div>
</template>

<script>
import { getUserChannelApi } from '../../api/channel'
import ArticleList from './components/articleList.vue'
import ChannelEdit from './components/channel-edit.vue'

export default {
  components: {
    ArticleList,
    ChannelEdit

  },
  data () {
    return {
      activedIndex: 0,
      isshow: false,
      show: false,
      // 当前用户的频道
      channelsList: []
    }
  },
  created () {
    this.getChannel()
  },
  methods: {

    async getChannel () {
      const { data } = await getUserChannelApi()
      // console.log(data)
      this.channelsList = data.channels
    }

  }
}
</script>

<style scoped lang='less'>
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 自定义tab样式
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #fc6627;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    // 控制列表区域可滚动
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  box-shadow: -6px -6px 8px #ddd;
}
</style>
